<template>
	<div class="app_search">
		<StickyFixed position="top" background="#F3F5F8">
			<VanSearch
				v-model="keyword"
				shape="round"
				clearable
				clear-trigger="always"
				placeholder="客户姓名/手机号/昵称"
				:left-icon="require('@IMG/icon_search.png')"
				@update:model-value="onSearchCont()"
				background="#F3F5F8"
			/>
		</StickyFixed>
		<VanList
			class="list_cust"
			v-if="[(SEARCH_STATUS.load), (SEARCH_STATUS.succ)].includes(searchStatus)"
			@load="onSearchCont(pageNo + 1)"
			v-model:loading="loading"
			:immediate-check="false"
			:finished="finished"
			finished-text="数据全部加载完毕～"
			loading-text="加载中..."
		>
			<CustCard
				v-for="card in custList"
				:key="card.id"
				:data="card"
				:is-encode="isEncode"
				:highlight-word="keyword.trim()"
			/>
		</VanList>
		<EmptyLayout v-else-if="SEARCH_STATUS.empty === searchStatus" />
		<EmptyLayout
			v-else-if="SEARCH_STATUS.fail === searchStatus"
			image="error"
		/>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { Search as VanSearch, List as VanList, Empty as VanEmpty } from 'vant'
import StickyFixed from '@C/StickyFixed/StickyFixed'
import CustCard from '@C/CustCard/CustCard'
import EmptyLayout from '@C/EmptyLayout/EmptyLayout'
import { debounce } from '@/utils'
import { GetCustList } from '@/api'

const SEARCH_STATUS = {
	init: 'init',
	load: 'load',
	succ: 'succ',
	empty: 'empty',
	fail: 'fail',
}

const PAGE_SIZE = 20

const isEncode = bjsdk.query('isEncode') === '1'

const searchStatus = ref(SEARCH_STATUS.init) // 搜索状态 0初始化(未搜索) 1搜索成功(有数据) 2搜索成功(无数据) 3搜索失败
const keyword = ref('')
const custList = ref([])
const pageNo = ref(1)
const loading = ref(false)
const finished = ref(false)
let _debounceFn = null
const onSearchCont = async (targetPageNo = 1) => {
	const searchWord = keyword.value.trim()
	// 搜索框已清除，清空列表
	if (!searchWord) {
		custList.value = []
		searchStatus.value = SEARCH_STATUS.init
		return
	}
	if (targetPageNo === 1) {
		custList.value = []
		searchStatus.value = SEARCH_STATUS.load
	}
	finished.value = false
	loading.value = true
	if (!_debounceFn) {
		_debounceFn = debounce(async (searchWord, targetPageNo) => {
			// 在节流后，搜索词已更改，则不继续向下运行
			if (searchWord !== keyword.value.trim()) {
				return
			}
			const {
				code,
				msg,
				data = {},
			} = await GetCustList({
				searchParam: searchWord,
				pageNo: targetPageNo,
				pageSize: PAGE_SIZE,
			}).catch(() => ({}))
			// 在请求完成后，搜索词已更改，则不继续向下运行
			if (searchWord !== keyword.value.trim()) {
				return
			}
			loading.value = false
			if (code !== 200) {
				if (targetPageNo === 1) {
					searchStatus.value = SEARCH_STATUS.fail
					custList.value = []
				}
				return
			}
			const { pageNo: _pageNo, total, lists = [] } = data
			custList.value =
				_pageNo === 1 ? lists : [...custList.value, ...lists]
			pageNo.value = _pageNo
			finished.value = _pageNo >= total / PAGE_SIZE // 已全部加载
			searchStatus.value = custList.value.length
				? SEARCH_STATUS.succ
				: SEARCH_STATUS.empty
		}, 500)
	}
	_debounceFn(searchWord, targetPageNo)
}
</script>

<style lang="less" scoped>
.app_search {
	.van-search {
		--van-search-content-background: #fff;
		--van-search-input-height: 72px;
		--van-cell-font-size: 28px;
		--van-search-left-icon-color: #afb1b7;
		--van-field-icon-size: 36px;
		--van-search-padding: 24px 30px;
		--van-field-clear-icon-size: 32px;
		--van-field-clear-icon-color: #999;
		:deep(.van-search__content) {
			border: 1px solid #e9ecf0;
			.van-field__control {
				&::placeholder {
					color: #ccc;
					font-size: 28px;
				}
			}
			.van-field__clear {
				transform: translate(-8px, 0);
			}
		}
	}
	.list_cust {
		margin: 4px 30px 0;
		.cust_card + .cust_card {
			margin: 20px 0 0;
		}
	}
}
</style>
